<template>
  <Card class="address-input">
    <p slot="title">当前填写地址：<b>{{ finalUrl }}</b></p>
    <Form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      :label-width="72"
      hide-required-mark
    >
      <FormItem prop="jumpType" label="跳转类型" :error="error.jumpType">
        <Select v-model="form.jumpType" filterable style="width: 300px" placeholder="请选择跳转类型">
          <Option value="1">书城页面</Option>
          <Option value="2">网页地址</Option>
        </Select>
      </FormItem>
      <!-- 网页输入 -->
      <FormItem v-if="form.jumpType === '2'" prop="webUrl" label="网页地址" :error="error.webUrl">
        <Input v-model="form.webUrl" placeholder="请输入网页地址" style="width: 300px" />
      </FormItem>
      <!-- 书城页面 -->
      <template v-if="form.jumpType === '1'">
        <FormItem prop="pageName" label="书城页面" :error="error.webUrl">
          <Select v-model="form.pageName" filterable style="width: 300px" placeholder="请选择书城页面">
            <Option value="bookdetail">书籍详情页</Option>
            <Option value="reader">阅读页面</Option>
            <Option value="share">分享页面</Option>
            <Option value="person">个人中心</Option>
          </Select>
        </FormItem>
        <FormItem v-if="showBookSelect" prop="book" label="选择书籍" :error="error.book">
          <m-book-selector :value.sync="form.book" />
        </FormItem>
        <FormItem v-if="showChapterInput" prop="chapter" label="选择章节" :error="error.chapter">
          第&nbsp;<InputNumber :max="30000" :min="1" v-model="form.chapter" />&nbsp;章
        </FormItem>
      </template>
    </Form>
  </Card>
</template>

<script>
import BookSelector from './components/BookSelector';

const validateWebUrl = (rule, value, callback) => {
  const urlRegExp = /^(https|http):\/\/.+$/;
  if (value === '') {
    callback(new Error('请输入网页地址'));
  } else if (!urlRegExp.test(value)) {
    callback(new Error('网页地址不合法'));
  } else {
    callback();
  }
};

const validateChapter = (rule, value, callback) => {
  const urlRegExp = /^\d+$/;
  if (value === '') {
    callback(new Error('请选择章节数'));
  } else if (!urlRegExp.test(value)) {
    callback(new Error('章节数不合法'));
  } else {
    callback();
  }
};

export default {
  name: 'm-address-input',

  components: {
    [BookSelector.name]: BookSelector
  },

  props: {
    value: String,

    params: {
      type: Object,
      default: () => {}
    }
  },

  watch: {
    form: {
      handler (newValue, oldValue) {
        this.$emit('update:value', this.finalUrl);
        this.$emit('update:params', newValue);
      },
      deep: true
    },

    params: {
      handler (newValue, oldValue) {
        this.form = newValue;
      },
      deep: true
    }
  },

  data () {
    return {
      form: {
        jumpType: '', // 跳转地址
        webUrl: '', // 网页地址
        pageName: '',
        book: '',
        chapter: 1
      },
      rules: {
        jumpType: [{ required: true, message: '请选择跳转类型', trigger: 'select' }],
        webUrl: [{ required: true, validator: validateWebUrl, trigger: 'blur' }],
        pageName: [{ required: true, message: '请选择书城页面', trigger: 'select' }],
        book: [{ required: true, message: '请选择书籍', trigger: 'select' }],
        chapter: [{ required: true, validator: validateChapter, trigger: 'blur' }]
      },
      error: {}
    };
  },

  computed: {
    finalUrl () {
      if (!this.form.jumpType) return '';
      if (this.form.jumpType === '2') return this.form.webUrl;
      if (this.form.jumpType === '1') {
        let url = '';
        switch (this.form.pageName) {
          case 'bookdetail':
            if (this.form.book) url = `/pages/bookdetail/index?id=${this.form.book}`;
            break;
          case 'reader':
            if (this.form.book) url = `/pages/reader/index?id=${this.form.book}`;
            if (this.form.book && this.form.chapter) url = `/pages/reader/index?id=${this.form.book}&num=${this.form.chapter}`;
            break;
          case 'share':
            url = '/sub-packages/share/index';
            break;
          case 'person':
            url = '/pages/user/index';
            break;
          default:
            break;
        }
        return url;
      }
      return '';
    },

    showBookSelect () {
      return this.form.pageName === 'bookdetail' || this.form.pageName === 'reader';
    },

    showChapterInput () {
      return this.form.pageName === 'reader' && !!this.form.book;
    }
  },

  mounted () {
    if (this.params) {
      this.form = {
        ...this.form,
        ...this.params
      };
    }
  },

  methods: {
    handleSubmit (value) {
      this.$emit('update:value', this.finalUrl);
    },

    handleReset () {
      this.$refs.form.resetFields();
      this.form = {
        jumpType: '',
        webUrl: '',
        pageName: '',
        book: '',
        chapter: 1
      };
    }
  }
};
</script>

<style lang="scss">
.address-input {
  padding: 0 10px;

  .ivu-card-head {
    padding: 4px 0;

    & > p {
      font-size: 12px;
      font-weight: normal;
      color: #515a6e;

      & > b {
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
      }
    }
  }

  .ivu-form-item {
    margin-bottom: 10px;
  }

  .ivu-form-item-error-tip {
    position: relative;
    left: 64px;
  }

  .ivu-card-body {
    padding-bottom: 0;
  }
}
</style>
